<template>
	<view class="four_hu1">
		<!-- <view class="four_a1"><u-swiper :list="list" name="pictureUrl" height="50px"></u-swiper></view> -->
		<!-- <view class="swiper">
			<view class="swiper-box">
					<swiper @change="handleDotChange" autoplay="true" circular="true" indicator-dots>
						<swiper-item v-for="(item, index) in list"
							@tap="indexTopToDetailPage(item)" :key="item.pictureId">
							<view class="swiper-item">
								<image :src="item.pictureUrl"  mode="aspectFill"/>
							</view>
						</swiper-item>
					</swiper>
			</view>
		</view> -->
		<view class="four_hu2">
			<view style="text-align: center;"><h3>销售情况</h3></view>
			
			<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" @touchmove="moveLineA"
				@touchend="moveLineA"></canvas>
		</view>
		
		<view >
			<view>
				<h3 style="line-height: 40px;">单价：<text style="color: red;">{{canshu.orderDetailPrice}}</text></h3>
				<h3 style="line-height: 40px;">总库存：<text style="color: red;">{{canshu.orderDetailRepertory}}</text></h3>
				<h3 style="line-height: 40px;">库存剩余：<text style="color: red;">{{kucun-canshu.orderDetailSales}}</text></h3>
				<h3 style="line-height: 40px;">销售额：<text style="color: red;">{{canshu.orderDetailSales}}</text></h3>
				<h3 style="line-height: 40px;">盈利：<text style="color: red;">{{canshu.orderDetailSales*canshu.orderDetailPrice}}</text></h3>
			</view>
		</view>
	</view>

</template>
<script>
	/**
	 * @des 商品详情
	 *
	 * @author stav stavyan@qq.com
	 * @date 2020-03-23 15:04
	 * @copyright 2019
	 */
	import {
		productDetail
	} from '@/api/product';
	// import rfProductDetail from '@/components/rf-product-detail';
	// import rfBackTop from '@/components/rf-back-top';
	// import rfNoData from '@/components/rf-no-data';
	import request from '../../utils/request.js'
	import uCharts from '../../charts/js_sdk/u-charts/u-charts.js';
	var _self; //用于全局this
	var canvaLineA = null; //ucharts实列
	export default {
		data() {
			return {
				current: 0,
				productId: undefined,
				list: [],
				cWidth: '',
				cHeight: '', //画布的宽高
				data: {
					// categories: [],
					// series: [{
					// 	name: '成交量A',
					// 	data: []
					// }]
				},
				canshu:{
					
				},
				kucun:undefined
			}
		},
		onLoad(options) {
			this.productId = options.id;
			console.log(options.id)
			_self = this
			this.cWidth = uni.upx2px(750);
			this.cHeight = uni.upx2px(500);
			this.getServerData()
		},
		created() {
			this.getProductDetail()
			this.fourQueryImg()
			// this.getServerData()
			 //声明this
			// _self.getServerData();
			//_self.showLineA("canvasLineA", _self.data) //触发执行函数
		},
		methods: {
			// 隐藏顶部导航
			// hideNavDetail() {
			// 	this.navDetailShow = false;
			// },
			/* 获取商品数据 */
			getProductDetail() {
				request({
					url: "/detail/bgs/order-detail/fourQueryDetail?id=" + this.productId,
					method: 'GET',
					success: (res) => {
						console.log(res.data.data.data)
						this.canshu = res.data.data.data
						var aa=res.data.data.data.orderDetailRepertory
						this.kucun=Number(aa)
						console.log(this.kucun)
					}
				})
			},
			fourQueryImg() {
				request({
					url: "/detail/bgs/picture/fourQueryImg?id=" + this.productId,
					method: 'GET',
					success: (res) => {
						// console.log("1111", res.data.data.data)
						this.list = res.data.data.data
					}
				})
			},
			handleDotChange(e) {
				this.current = e.detail.current;
			},
			
			
			
			getServerData() {
				request({
					url: "/order/bgs/order/fourQueryOrder?id=" + this.productId,
					method: 'GET',
					success: function(res) {
						var aaa = {
							categories: res.data.data.data.categories,
							series: []
						}
						aaa.series.push(res.data.data.data.series)
						//这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
						this.data = aaa
						_self.showLineA("canvasLineA", this.data) //触发执行函数
					},
					fail: () => {
						this.tips = "网络错误，小程序端请检查合法域名";
					},
				});
			},
			showLineA(canvasId, chartData) {
				canvaLineA = new uCharts({
					//$this: _self,//指针
					//canvasId: canvasId,//id
					//注意：v2.0版本后，需要自行获取canvas的绘图上下文并传入opts.context！"
					context: uni.createCanvasContext(canvasId, _self),
					type: 'line', //类型
					colors: ['#facc14', '#f04864', '#90ed7d'], //每一条颜色
					fontSize: 11, //字体大小
					legend: { //图列相关配置
						show: true,
						padding: 5,
						lineHeight: 11,
						margin: 0,
					},
					dataLabel: true, //显示数据标签内容值
					// dataPointShape: true,
					background: '#FFFFFF',
					// pixelRatio: this.pixelRatio,
					categories: chartData.categories, //数据类别
					series: chartData.series, //数据列表
					// animation: true,
					xAxis: { //x轴配置
						type: 'grid',
						gridColor: '#CCCCCC', //x轴网格颜色
						gridType: 'dash', //x轴网格线形，'solid'实线 dash 虚线
						dashLength: 8, //x轴网格为虚线时，单段虚线长度
						calibration:true ,//开启刻度
					},
					yAxis: {
						gridType: 'dash',
						gridColor: '#CCCCCC',
						dashLength: 8,
						data:[{"min":0,"max":20}]
					},
					width: _self.cWidth, //canvas宽度 单位px
					height: _self.cHeight, //canvas高度 单位px
					extra: {
						line: {
							type: 'curve' //曲线，curve  straight直线
						}
					}
				});
			},
			moveLineA(e) {
				canvaLineA.showToolTip(e, { //详情框
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data
					}
				});
			}
		}


	};
</script>
<style scoped lang="scss">
	page {
		background: $page-color-base;
	}

	/*轮播图*/
	.swiper {
		width: 100%;
		margin-bottom: 20upx;
		display: flex;
		justify-content: center;

		.swiper-box {
			width: 100%;
			height: 80vw;
			overflow: hidden;
			border-radius: 15upx;
			//box-shadow: 0upx 8upx 25upx rgba(0, 0, 0, 0.2);
			//兼容ios，微信小程序
			position: relative;
			z-index: 1;

			swiper {
				width: 100%;
				height: 80vw;

				swiper-item {
					image {
						width: 100%;
						height: 80vw;
					}
				}
			}
		}
	}

	/*样式的width和height一定要与定义的cWidth和cHeight相对应*/
	// .qiun-charts {
	// 	width: 750upx;
	// 	height: 500upx;
	// 	background-color: #FFFFFF;
	// }

	.charts {
		width: 750rpx;
		height: 500rpx;
		background-color: #FFFFFF;
	}

	.four_hu2 {
		padding-top: 50px;
	}
</style>
